<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        left: 10px;
        top: 0px;
      }
      button {
        margin-top: 10px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <button id="listen">
        Listen
      </button> 
      <button id="dontListen">
        Dont' Listen
      </button>
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>
    <script defer="defer">
      function writeMessage(message) {
        text.setText(message);
        layer.draw();
      }
      
      var stage = new Kinetic.Stage({
        container: 'container',
    width: 565,
    height: 625
      });
      
      var layer = new Kinetic.Layer();

      var text = new Kinetic.Text({
        x: 262,
        y: 85,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: 'Play',
        fill: 'white'
      });

      var tab1 = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'black',
        stroke: 'grey',
        strokeWidth: 2
      });

      var text2 = new Kinetic.Text({
        x: 262,
        y: 141,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: 'Scores',
        fill: 'white'
      });

      var tab2 = new Kinetic.Rect({
        x: 239,
        y: 131,
        width: 100,
        height: 50,
        fill: 'black',
        stroke: 'grey',
        strokeWidth: 2
      });

      var text3 = new Kinetic.Text({
        x: 262,
        y: 197,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: 'Exit',
        fill: 'white'
      });

      var tab3 = new Kinetic.Rect({
        x: 239,
        y: 187,
        width: 100,
        height: 50,
        fill: 'black',
        stroke: 'grey',
        strokeWidth: 2
      });
      tab1.on('click', function() {
        writeMessage('Mouseover oval');
      });

      layer.add(tab1);
      layer.add(text);
      layer.add(tab2);
      layer.add(text2);
      layer.add(tab3);
      layer.add(text3);
      stage.add(layer);

      document.getElementById('listen').addEventListener('click', function() {
        tab1.listening(true);
        layer.drawHit();
      }, false);

      document.getElementById('dontListen').addEventListener('click', function() {
        tab1.listening(false);
        layer.drawHit();
      }, false);
    </script>
  </body>
</html>